<template>
    <div>
        <el-dialog
                :before-close="handleClose"
                :title="dialog.title"
                :visible.sync="isDialog"
                width="40%"
        >
            <el-row>
                <el-form
                        :model="roleForm"
                        :rules="roleRules"
                        label-width="130px"
                        ref="roleForm">
                    <el-col :span="24">
                        <el-form-item label="角色名称" prop="rolename">

                            <el-input
                                    placeholder="角色名称
"
                                    v-model="roleForm.rolename"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="允许加入审批流程">

                            <el-select
                                    style="width: 100%"
                                    v-model="roleForm.allowauditprocessstate"
                                    clearable
                            >
                                <el-option
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        v-for="(item,index ) of roleSel"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注信息">
                            <el-input
                                    placeholder="备注信息"
                                    type="textarea"
                                    v-model="roleForm.remark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="tc">
                        <el-button type="priarmy" @click="handleSave('roleForm')">
                            保存信息
                        </el-button>
                        <el-button type="primary" @click="handleClear('roleForm')">
                            清空数据
                        </el-button>
                    </el-col>
                </el-form>

            </el-row>
        </el-dialog>
    </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop,Emit } from "vue-property-decorator";
  import { roleDataEdit } from "@/api/api";

  @Component({})
  export default class RoleMessage
    extends Vue {
    private name!: "RoleMessage";
    @Prop(Object) private dialog!: any | undefined;
    @Prop(Object) private roleForm!: any | undefined;
    @Emit('update') private handleUpdate(pages:number){
      return pages
    }
    private roleSel = [{
      label:'是',
      value:'1'
    },{
      label:'否',
      value:'0'
    }];
    private roleRules = {
      rolename:[
        {required:true,message:'角色名称不能为空',trigger:blur}
      ]
    };
    private get isDialog() {
      return this.dialog.isDialog;
    }
    private set isDialog(val:boolean){
      this.dialog.isDialog=val
    }

    private handleClose() {
      this.dialog.isDialog=false
    }

    private handleSave(name: any){
      (this.$refs[name] as any).validate(async (volid: any)=>{
        if(volid){
          const {options}=this.dialog;
          if(options==='edit'){
            const {id,rolename,allowauditprocessstate,remark}=this.roleForm;
            let form={
              id,
              rolename,
              allowauditprocessstate,
              remark,
            };
            await this.handleInfo(form)

          }
          if(options==='add'){
            const {rolename,allowauditprocessstate,remark}=this.roleForm;
            let form={
              rolename,
              allowauditprocessstate,
              remark,
            };
           await this.handleInfo(form)
          }
        }
      })
    }

    private  async handleInfo(form: {} | undefined){
      const res =await roleDataEdit(form);
      if(res){
        const {success}=res;
        if(success){
          this.$message.success({
            message:'保存成功'
          });
         await this.handleUpdate(1);
          this.isDialog=false
        }else{
          this.$message.error({
            message:'保存失败'
          })
        }
      }else{
        this.$message.error({
          message:'保存失败'
        })
      }
    }
    private handleClear(name:string){
      (this.$refs[name] as any).resetFields();
    }
  }
</script>

<style lang="scss" scoped>

</style>
